<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {include file="/layout/scriptload"}
    <title>图文设置</title>
    <style>
        .iphone-model{
            width: 260px;
            height: 539px;
            background-image: url("/../static/img/bg_iphone.png");
            background-size: 100% 100%;
            margin-left: 60px;
            float: left;
            position: relative;
        }
        .menu-box{
            width: 216px;
            height: 314px;
            overflow-y: scroll;
            position: absolute;
            top: 119px;
            left: 22px;
            padding: 10px 0 0 10px;
        }
        .menu-list{
            width: 180px;
            height: auto;
            overflow: hidden;
            border-radius: 6px;
        }
        .menu-list-top{
            width: 180px;
            height: 80px;
            position: relative;
            background: #ffffff;
            border-bottom: 1px solid #f4f4f5;
            display: none;
        }
        .menu-list-top-title{
            font-size: 12px;
            color: #ffffff;
            position: absolute;
            bottom: 7px;
            left: 7px;
        }
        .menu-list-body{
            width: 180px;
            height: 60px;
            font-size: 12px;
            background: #ffffff;
        }
        .menu-list-body-title{
            width: 130px;
            height: 60px;
            padding: 7px;
            float: left;
            border-bottom: 1px solid #f4f4f5;
        }
    </style>
</head>
<body>
<div class="box">
    <!-- /.box-header -->
    <section class="content">
        <div class="box-body">
            <div class="iphone-model">
                <div class="menu-box">
                    <div class="menu-list">
                        <div class="menu-list-top" id="sel_0">
                            <img style="width: 180px;height: 80px;" src="" alt="">
                            <div class="menu-list-top-title"></div>
                        </div>
                    </div>
                </div>
            </div>
            <form role="form" id="img-num">
            </form>
            <div class="form-group col-md-7 pull-right">
                <div id="btn_save" class="btn pull-right" style="background: #18bc9c;color: #ffffff;">保存</div>
            </div>
        </div>
    </section>
</div>
</body>
<script>
    var _id = '{$id}';
    function getlist()
    {
        $.ajax({
            type:'post',
            cache: false,
            url:"{:url('replyfans/getImgTextNum')}",
            data:{mid:_id},
            success:function(data){
                if(data.code==0){
                    $.each(data.info,function (index, item) {
                        $('#img-num').append(item);
                    });
                    if(data.count == 1){
                        $('.menu-list-top').show();
                        $('#sel_0').children('img').attr('src',data.imginfo[0].imgurl);
                        $('#sel_0').children('div').text(data.imginfo[0].title);
                    }
                    if(data.count >1){
                        $('.menu-list-top').show();
                        $('#sel_0').children('img').attr('src',data.imginfo[0].imgurl);
                        $('#sel_0').children('div').text(data.imginfo[0].title);
                        for (var i=1;i<data.count;i++){
                            var html ='<div class="menu-list-body" id="sel_'+i+'">';
                            html +='       <div class="menu-list-body-title">'+data.imginfo[i].title+'</div>';
                            html +='       <img style="width: 45px;height: 45px;margin: 5px 5px 0 0;float: left;" src="'+data.imginfo[i].imgurl+'" alt="">';
                            html +='</div>';
                            $('.menu-list').append(html);
                        }
                    }
                }
            },
            error:function () {
                layerAlert('系统出错，请联系管理员');
            }
        })
    }
    $(function(){
        getlist();
        $('#img-num').on('change','.tuwen',function(){
            var $_this = $(this);
            var _id = $_this.val();
            var _num = $_this.attr('i_num');
            $.ajax({
                type:'post',
                cache: false,
                url:"{:url('replyfans/getSetImgtextInfo')}",
                data:{pid:_id},
                success:function(data){
                    if(data.code==0){
                        if(_num == 1){
                            $('#sel_0').children('img').attr('src',data.info.imgurl);
                            $('#sel_0').children('div').text(data.info.title);
                        }else if(_num == 2){
                            $('#sel_1').children('img').attr('src',data.info.imgurl);
                            $('#sel_1').children('div').text(data.info.title);
                        }else if(_num == 3){
                            $('#sel_2').children('img').attr('src',data.info.imgurl);
                            $('#sel_2').children('div').text(data.info.title);
                        }else if(_num == 4){
                            $('#sel_3').children('img').attr('src',data.info.imgurl);
                            $('#sel_3').children('div').text(data.info.title);
                        }else if(_num == 5){
                            $('#sel_4').children('img').attr('src',data.info.imgurl);
                            $('#sel_4').children('div').text(data.info.title);
                        }else if(_num == 6){
                            $('#sel_5').children('img').attr('src',data.info.imgurl);
                            $('#sel_5').children('div').text(data.info.title);
                        }else if(_num == 7){
                            $('#sel_6').children('img').attr('src',data.info.imgurl);
                            $('#sel_6').children('div').text(data.info.title);
                        }else if(_num == 8){
                            $('#sel_7').children('img').attr('src',data.info.imgurl);
                            $('#sel_7').children('div').text(data.info.title);
                        }
                    }
                }
            })
        });
        $('#btn_save').click(function(){
            var _tuwen = $('.tuwen');
            $.each(_tuwen,function (index,item) {
                var _tid = $(this).val();
                var _tnum = $(this).attr('i_num');
                $.ajax({
                    type:'post',
                    cache: false,
                    url:"{:url('replyfans/doSetImgText')}",
                    data:{id:_id,tid:_tid,tnum:_tnum},
                    success:function(data){
                        if(data.code==0){

                        }else{
                            layerAlert(data.msg);
                        }
                    }
                })
            });
            layerAlert('保存成功',function(){
                parent.relist();
                layerParentClose();
            });
        })
    })
</script>
</html>